<template>
    <div class="qilin-messageBoard qilin-px-2 qilin-pb-8">
        <div class="qilin-messageBoard-text">
            <el-input type="textarea" :rows="5" placeholder="想对我说些啥呢..."
                v-model="comment"
            ></el-input>
            <el-button type="primary" size="mini" @click="insertComment()">发表评论</el-button>
        </div>
        <div class="qilin-messageBoard-list">
            <div class="qilin-messageBoard-list-title">所有评论</div>
            <div class="qilin-messageBoard-list-content qilin-mt-2 qilin-p-4">
                <div class="qilin-messageBoard-list-content-item qilin-mt-2" v-for="item in commentListData"
                    :key="item._id"
                >
                    <div class="item-header">
                        <img :src="item.image ? uploadImageUrl+item.image : require('@/assets/images/yunyun3.jpg')"  alt="">
                        <span>{{item.from}}</span>
                    </div>
                    <div class="item-content qilin-px-4 qilin-py-2">
                        <div>{{item.content}}</div>
                        <div>
                            <span @click="commentOther(item._id,item.from)">评论ta</span>
                            {{getDate(item.createdAt,"")}}</div>
                    </div>
                    <template v-if="item.items.length > 0">
                        <div class="item-children qilin-mx-4 qilin-px-4 qilin-py-2" v-for="item1 in item.items" :key="item1._id">
                            <div class="item-children-item">
                                <div class="item-children-item-header">
                                    <img :src="item1.image ? uploadImageUrl+item1.image : require('@/assets/images/yunyun3.jpg')"  alt="">
                                    <span>{{item1.from}}</span>
                                </div>
                                <div class="item-children-item-content qilin-p-4">
                                    <div>{{item1.content}}</div>
                                    <div>{{getDate(item1.createdAt,"")}}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                </div>
            </div>
        </div>
        <QilinDialog :dialogConfig.sync="dialogConfig" @handleClose="closeDialog"
            @submitConfirm="submitData('formData')"
        >
            <QilinForm :formConfig.sync="formConfig" ref="formData"></QilinForm>
        </QilinDialog>
    </div>
</template>
<script>
import {getCommentData,insertCommentData} from "@/api/messageBoard/index.js";
import globalUtils from "@/utils/index.js";
export default {
    inject:["uploadImageUrl"],
    data(){
        return {
            comment:"",
            commentListData:[],
            dialogConfig:{ //弹窗的配置对象
                isShow:false,
                title:"评论ta"
            },
            formConfig:{
                elFormConfig:{
                    labelWidth:"6.429rem"
                },
                itemConfig:[
                    {
                        dataName:"content",
                        labelName:"评论内容",
                        type:"input",
                        inputType:"textarea",
                        rows:4,
                        width:24,
                        validate:[
                            {
                                required:true,
                                message:"请输入评论内容",
                                trigger:"blur"
                            }
                        ]
                    }
                ],
                submitData:{
                    content:""
                }
            },
            commentParams:{}
        }
    },
    computed:{
        getDate(){
            return function(date,format){
                return globalUtils.formatToDate(date,format);
            };
        },
        userInfo(){
            return this.$store.getters.userInfo;
        }
    },
    methods:{
        // 点击发表评论事件监听
        insertComment(){
            let params={};
            params.userId=this.userInfo.id;
            params.from=this.userInfo.name;
            params.email=this.$Qilin.Storage.getValueLocalStorage("email");
            if(this.comment){
                params.content=this.comment;
                insertCommentData(params).then((res)=>{
                    if(res.code === 1000){
                        this.$message({
                            message:"评论成功",
                            type:"success"
                        });
                        this.getCommentData();
                    };
                });
            }else{
                this.$message({
                    message:"请输入内容",
                    type:"warning"
                });
            };
        },
        // 点击评论ta事件监听
        commentOther(parentId,toName){
            this.commentParams.parentId=parentId;
            this.commentParams.to=toName;
            this.dialogConfig.isShow=true;
            this.dialogConfig.title="评论"+toName;
        },
        //点击弹窗确认按钮事件监听
        submitData(refName){
            this.$refs[refName].formValidate((valid)=>{
                if(valid){
                    // console.log(this.formConfig);
                    let params={};
                    params.userId=this.userInfo.id;
                    params.from=this.userInfo.name;
                    params.email=this.$Qilin.Storage.getValueLocalStorage("email");
                    params.parentId=this.commentParams.parentId;
                    params.to=this.commentParams.to;
                    params.content=this.formConfig.submitData.content;
                    insertCommentData(params).then((res)=>{
                    if(res.code === 1000){
                            this.$message({
                                message:"评论成功",
                                type:"success"
                            });
                            this.getCommentData();
                            this.closeDialog();
                        };
                    });
                };
            });
        },
        //关闭弹窗事件监听
        closeDialog(){
            this.$refs["formData"].formResetFields();
            this.dialogConfig.isShow=false;
        },
        // 初始化获取评论事件监听
        getCommentData(){
            getCommentData().then((res)=>{
                if(res.code===1000){
                    this.commentListData=res.data.data;
                };
            });
        }
    },
    mounted(){
        this.getCommentData();
    }
}
</script>
<style lang="less" scoped>
.qilin-messageBoard{
    >.qilin-messageBoard-text{
        text-align:right;
        >.el-button{
            margin-top:@rem10;
        }
    }
    >.qilin-messageBoard-list{
        >.qilin-messageBoard-list-title{
            height:@rem30;
            display:flex;
            align-items:center;
            &::before{
                content:"";
                display: inline-block;
                width:@rem5;
                height:100%;
                margin-right:@rem15;
                background-color:@color-theme-common-dark;
                border-radius: @radius-default;
            }
        }
        >.qilin-messageBoard-list-content{
            background-color:#fff;
            border-radius: @radius-default;
            >.qilin-messageBoard-list-content-item{
                >.item-header{
                    .EDGQilinFlex(flex-start);
                    >img{
                        width:@rem30;
                        height:@rem30;
                        border-radius: @radius-circle;
                    }
                    >span{
                        margin-left:@rem10;
                        font-size:@size-text-medium;
                        color:@color-text-title;
                    }
                }
                >.item-content{
                    >div:last-child{
                        text-align:right;
                        >span{
                            margin:0 @rem10;
                            color: @color-text-info;
                            cursor: pointer;
                        }
                    }
                }
                >.item-children{
                    background-color:#F6F7FA;
                    >.item-children-item{
                        >.item-children-item-header{
                            .EDGQilinFlex(flex-start);
                            >img{
                                width:@rem30;
                                height:@rem30;
                                border-radius: @radius-circle;
                            }
                            >span{
                                margin-left:@rem10;
                                font-size:@size-text-medium;
                                color:@color-text-title;
                            }
                        }
                        >.item-children-item-content{
                            >div:last-child{
                                text-align:right;
                            }
                        }
                    }
                }
            }
        }
    }
}
</style>